<template>
  <div>
    <!-- 底部购买 -->
    <div class="B">
      <!-- 黄色顶部 -->
      <div class="box_3">
        <!-- <img src="../../public/bor2.png" alt="" /> -->
      </div>
      <div class="container">
        <div class="box">
          <div class="box_1">
            <img src="../../public/dongwu1.png" alt="" />
          </div>
          <div class="box_2">
            <img src="../../public/jiao6.png" alt="" />
          </div>

          <div class="card">
            <div class="card_h4"><h4>——购买动物园世界门票——</h4></div>
            <div class="card_dw1">
              <img class="img_1" src="../../public/dw1.jpg" alt="" />
            </div>

            <div class="card_fast">
              <img class="img_3" src="../../public/i5.jpg" alt="" />
              <div>
                <h1>快速入园</h1>
                <i></i>
                <p>园区闸机检票入园或手机验证快速入园</p>
              </div>
            </div>
            <div class="card_play">
              <img class="img_4" src="../../public/i4.jpg" alt="" />
              <div>
                <h1>畅玩动物世界门票</h1>
                <i></i>
                <p>一票看尽所有动物，畅玩所有项目</p>
              </div>
            </div>
            <div class="card_btn"><button>立即购买</button></div>

            <div class="card_dw2">
              <img class="img_2" src="../../public/dw2.jpg" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <div class="C">
      <div class="container">
        <div class="stair">
          <div class="stair_ul">
            <ul>
              <li class="title">动物乐园</li>
              <li><a href="#">车行区</a></li>
              <li><a href="">步行区</a></li>
            </ul>
            <ul>
              <li class="title">游玩演艺</li>
              <li><a href="">亲子乐园</a></li>
            </ul>
            <ul>
              <li class="title">活动优惠</li>
              <li><a href="">新闻</a></li>
              <li><a href="">优惠信息</a></li>
              <li><a href="">主题活动</a></li>
            </ul>
            <ul>
              <li class="title">研学互动</li>
              <li><a href="">研学课堂</a></li>
              <li><a href="">动物互动</a></li>
            </ul>
            <ul>
              <li class="title">美味餐饮</li>
            </ul>
            <ul>
              <li class="title">计划行程</li>
              <li><a href="">游园指南</a></li>
              <li><a href="">游园提示</a></li>
              <li><a href="">园区时间</a></li>
              <li><a href="">交通指南</a></li>
              <li><a href="">常见问题</a></li>
              <li><a href="">地图下载</a></li>
              <li><a href="">游玩路线</a></li>
            </ul>
            <ul>
              <li class="title">关于我们</li>
              <li><a href="">园区简介</a></li>
            </ul>
          </div>
          <div class="stair_img">
            <div class="s_img1">
              <img src="../../public/code.jpg" alt="" />
              <h4>官网微信</h4>
            </div>
            <div class="s_img2">
              <img src="../../public/code2.jpg" alt="" />
              <h4>官方小程序</h4>
            </div>
          </div>
          <!-- <div class="stair_img2">
 
        </div> -->
          <a href="https://weibo.com/show8ox?topnav=1&wvr=6&topsug=1">
            <img src="../../public/wb.png" alt="" />
          </a>
        </div>
        <!-- 咨询电话 -->
        <div class="stair_1">
          <div class="stair_1_phone">咨询电话：400-102-6688</div>
          <div class="stair_1_time">客服电话服务时间（8:30-17:30）</div>
        </div>
      </div>
      <div class="hell">
        杭州野生动物世界有限公司 版权所有 【
        <a>互动力</a> 承建 运营】
        <a>浙ICP备12012113号-1 </a>
        <a>浙公网安备 33018302000335号</a> 可信任网站
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
.container {
  width: 1200px;
  margin: 0 auto;
}
/* 绿色背景图 */
.B {
  background: url(../../public/aa.jpg);
  padding: 20px 0 20px 0;
  position: relative;
}

.container > .box {
  padding: 20px 0;
  display: flex;
  justify-content: center;
}
/* 长颈鹿 */
.container > .box > .box_1 {
  position: absolute;
  left: 0;
  top: -22%;
  z-index: 1;
}
/* 鹦鹉 */
.container > .box > .box_2 {
  position: absolute;
  top: -22%;
  right: 0;
  z-index: 1;
}

/* 黄色顶部 */
.box_3 {
  position: absolute;
  top: -102px;
  width: 100%;
  /* margin: 0 auto;
  width: 1200px;
  left: 0; */
  height: 145px;
  background: url(../../public/bor2.png);
}
/* 卡片部分 */
.card {
  width: 100%;
  display: flex;
  background-color: #fff;
  position: relative;
  border-radius: 10px;
  height: 350px;
  margin: 40px 15px 0 15px;
}
/* 所有div */
.card > div {
  position: absolute;
}
/* 标题 */
.card > .card_h4 {
  margin-top: 10px;
  padding-top: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  color: #5f5f5f;
  font-weight: 500;
}
/* 卡片左边大象 */
.card > .card_dw1 {
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}
/* 快速入园 */
.card > .card_fast {
  padding: 0 15px;
  width: 33.333333%;
  left: 20%;
  top: 15%;
  display: flex;
}
.img_3,
.img_4 {
  margin: 30px 20px 0 0;
  padding-bottom: 10px;
}
h1 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  margin: 40px 0 8px 0;
}
i {
  display: block;
  width: 40px;
  height: 2px;
  background-color: #38bb62;
  margin-bottom: 8px;
}
p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  background-color: #fff;
}

/* 畅玩动物世界门票 */
.card > .card_play {
  padding: 0 15px;
  width: 33.333333%;
  right: 10%;
  top: 15%;
  display: flex;
}
/* 按钮背景图 */
.card > .card_btn {
  padding: 30px 0;
  background-color: #fff;
  background-image: url(../../public/line.jpg);
  width: 100%;
  bottom: 0;
  border-radius: 0 0 10px 10px;
}
/* 立即购买按钮 */
.card > .card_btn > button {
  height: 60px;
  width: 80%;
  margin-left: 10%;
  background: #34bb63;
  text-align: center;
  line-height: 60px;
  font-size: 20px;
  color: #fff;
  border-radius: 30px;
  cursor: pointer;
  border: none;
}
/* 卡片右边小龙 */
.card > .card_dw2 {
  right: 0;
  top: 43%;
  transform: translateY(-58%);
}

/******最底部 ******/
.C {
  background-image: url(../../public/footerBg.jpg);
  background-position-x: center;
  background-position-y: center;
  /* background-repeat-x: initial;
  background-repeat-y: initial; */
  background-attachment: fixed;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  background-size: cover;
}
.stair {
  display: flex;
  padding-top: 40px;
  position: relative;
}
.stair > .stair_ul {
  display: flex;
  padding: 0 15px;
  background-size: cover;
  width: 66.6%;
}
/* ul */
.stair_ul ul {
  width: 14%;
  padding: 0;
  margin-bottom: 10px;
  margin: 0;
}
.stair_ul ul a {
  text-decoration: none;
  color: #fff;
  font-size: 12px;
  line-height: 28px;
}
/* li字 */
.stair_ul ul .title {
  margin-bottom: 10px;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}
/* 扫码模块 */
.stair > .stair_img {
  /* display: block; */
  display: flex;
  width: 30%;
}
.stair > .stair_img > .s_img1,
.s_img2 {
  padding: 0 15px;
}
.stair > .stair_img img {
  width: 102px;
  height: 101px;
}
.stair > .stair_img h4 {
  /* position: absolute; */
  display: block;
  color: #fff;
  margin: 10px 0;
  font-weight: 500;
  font-size: 15px;
  text-align: center;
}
/* .stair > .stair_img2 {
  display: block;
} */
.stair > a img {
  /* display: block; */
  position: absolute;
  right: 20%;
  top: 85%;
  transform: translateY(-50%);
}

.stair_1 {
  padding-bottom: 50px;
  color: #fff;
  text-align: center;
}
.stair_1 > .stair_1_phone {
  margin-top: 50px;
  font-size: 44px;
}
.stair_1 > .stair_1_time {
  padding-top: 50px;
  font-size: 14px;
}
.hell {
  height: 52px;
  width: 100%;
  background-color: #000;
  color: #a6a5a4;
  text-align: center;
  margin-top: 30px;
  line-height: 52px;
  font-size: 14px;
}
.hell a:hover {
  cursor: pointer;
}
</style>
